<template>
    <div>

        <el-tabs v-model="activeName" >
            <el-tab-pane label="基础信息" name="Datas">

                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="物料编码" prop="ItemCode">
                                <el-input v-model="model.ItemCode" placeholder="请输入物料编码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="物料名称" prop="ItemName">
                                <el-input v-model="model.ItemName" placeholder="请输入物料名称"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="是否启用" prop="EnableFlag">
                                <el-radio-group v-model="model.EnableFlag">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="线别名称" prop="LineType">
                                <el-select v-model="model.LineType" placeholder="请选择线别名称" allow-create filterable>
                                    <el-option label="铜线" value="铜线"></el-option>
                                    <el-option label="铝线" value="铝线"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="型号名称" prop="Model">
                                <el-select v-model="model.Model" placeholder="请选择型号名称">
                                    <el-option v-for="item in ModelList" :key="item.Id" :label="item.Name"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">

                            <el-form-item label="规格名称" prop="Spec">
                                <el-select v-model="model.Spec" placeholder="请选择规格名称">
                                    <el-option v-for="item in SpecList" :key="item.Id" :label="item.Name"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="供应商" prop="Vendor">
                                <el-select v-model="model.Vendor" placeholder="请选择供应商">
                                    <el-option v-for="item in VendorList" :key="item.Id" :label="item.VendorName"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="有效日期" prop="EffectiveDate">
                                <el-date-picker v-model="model.EffectiveDate" type="datetime"
                                    placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品类名称" prop="Kind">
                                <el-select v-model="model.Kind" placeholder="请选择品类名称" allow-create filterable></el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产品物料标识" prop="ItemOrProduct">
                                <el-input  v-model="model.ItemOrProduct" placeholder="请输入产品物料标识" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品单位" prop="UnitOfMeasure">
                                <el-select v-model="model.UnitOfMeasure" placeholder="请选择产品单位">
                                    <el-option v-for="item in UnitMeasureList" :key="item.Id" :label="item.MeasureName"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品分类" prop="ItemTypeName">
                                <el-input v-model="model.ItemTypeName" placeholder="请选择产品分类" :readonly="true"
                                    @focus="selectItemType"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="采购价" prop="PurchasePrice">
                                <el-input v-model="model.PurchasePrice" placeholder="请输入采购价"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="销售价" prop="SalePrice">
                                <el-input v-model="model.SalePrice" placeholder="请输入销售价"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="启用安全库存" prop="SafeStockFlag" label-width="120px">
                                <el-radio-group v-model="model.SafeStockFlag">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="model.SafeStockFlag=='Y'">
                            <el-form-item label="最低库存" prop="MinStock">
                                <el-input v-model="model.MinStock" placeholder="请输入最低库存量"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8"  v-if="model.SafeStockFlag=='Y'">
                            <el-form-item label="最大库存" prop="MaxStock">
                                <el-input v-model="model.MaxStock" placeholder="请输入最大库存量"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>


                </el-form>
            </el-tab-pane>
            <el-tab-pane label="BOM组成" name="BOM">


                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                    <el-button  type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
                </div>


                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column  prop="BomItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="BomItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="BomItemSpec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Quantity" label="使用比例" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                           <el-input v-model="scope.row.Quantity"></el-input>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>

        <!-- 弹窗 -->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="60%" >
            <SelectedItemType @callback="ItemTypeCallback"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
            <ProductBomInput :IsBom="true"  :BomList="tableData"  @callback="AddBomCallBack"
                v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
        </el-dialog>



    </div>
</template>



<script>

import ProductBomInput from './ProductBomInput.vue';
import SelectedItemType from './SelectedItemType.vue'
export default {
    components: {
        ProductBomInput,
        SelectedItemType
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            activeName: 'Datas',
            ModelList: [],
            SpecList: [],
            UnitMeasureList: [],
            VendorList: [],

            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
            },

            ItemList: [],
            tableData: [],

            isLoading: false,
            
            //对话框对象
            dialogDomain: {
                title: '物料产品选择',
                dialogVisible: false,
                dialogType: 0  //0选择类别  1选择BOM
            },

            rules: {
                ItemCode: { required: true, message: '请输入物料编码', trigger: 'blur' },
                ItemName: { required: true, message: '请输入物料名称', trigger: 'blur' },
            }
        }
    },
    created() {
        this.getProductSelectData();

        this.GetProductBombyId(this.model.Id);
    },
    methods: {
        //选择分类
        selectItemType() {
            this.dialogDomain.title = "选择产品分类";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
        },
        ItemTypeCallback(model) {
            this.model.ItemTypeId = model.Id;
            this.model.ItemTypeCode = model.ItemTypeCode;
            this.model.ItemTypeName = model.ItemTypeName;
            this.dialogDomain.dialogVisible = false;
        },
        //添加产品BOM组成
        addBom() {
            this.dialogDomain.title = "选择产品BOM组成";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
        },
        delBom(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除产品BOM组成
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },


        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },

        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/Item', { model: this.model,ProductBomString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            this.$http.putForm('/api/Item', { model: this.model,ProductBomString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },

        getProductSelectData() {
            this.$http.get('/api/Integrated/getProductSelectData')
                .then(res => {
                    this.ModelList = res.Data.ModelList;
                    this.SpecList = res.Data.SpecList;
                    this.UnitMeasureList = res.Data.UnitMeasureList;
                    this.VendorList = res.Data.VendorList;
                })
        },
        GetProductBombyId(Id) {
            this.isLoading=true;
            this.$http.get('/api/Item/GetProductBombyId',{
                params:{
                    ItemId:Id
                }
            })
            .then(res => {
                this.tableData = res.Data;
                this.isLoading=false;
            })
        },



        //新增或编辑页面回调
        AddBomCallBack() {
            this.dialogDomain.dialogVisible = false;
        },



    }
}
</script>
 